<template>
	<!-- <view class="warp"> -->
		
		
	  <view class="page-container">
		  <tn-nav-bar fixed>订单列表</tn-nav-bar>
		<!-- 搜索区域 -->
		<view class="warp">
			
			<view class="search-box">
				  <view class="search-form">
					<view class="form-item">
					  <u-input
						v-model="queryParams.orderNo"
						placeholder="商户订单号"
						prefixIcon="search"
						border="bottom"
					  ></u-input>
					</view>
					<view class="form-item">
					  <u-input
						v-model="queryParams.transactionId"
						placeholder="微信订单号"
						prefixIcon="search"
						border="bottom"
					  ></u-input>
					</view>
					<view class="form-item">
					  <u-input
						v-model="queryParams.mchName"
						placeholder="门店名称"
						prefixIcon="home"
						border="bottom"
					  ></u-input>
					</view>
					<view class="form-item">
					  <u-input
						v-model="queryParams.roomName"
						placeholder="房间名称"
						prefixIcon="home"
						border="bottom"
					  ></u-input>
					</view>
				  </view>
				  <view class="search-buttons">
					<u-button type="primary" icon="search" @click="search">搜索</u-button>
					<u-button icon="reload" @click="reset">重置</u-button>
				  </view>
				</view>
			
				<!-- 操作按钮区 -->
				<view class="action-box">
				  <u-button type="primary" icon="plus" @click="createOrder()">创建手工单</u-button>
				</view>
			<view>共{{total}}条订单记录</view>
				<!-- 订单列表 -->
				<view class="order-list" v-for="(item,index) in orderList" :key="index">
				 <view class="order-item" >
					<view class="order-header">
					  <view class="store-name">{{ item.mchName }}</view>
					  <view class="order-status" >
						{{ item.statusDesc }}
					  </view>
					</view>
					
					<view class="order-content">
					  <view class="info-row">
						<text class="label">订单号：</text>
						<text class="value">{{ item.orderNo }}</text>
					  </view>
					  <view class="info-row">
						<text class="label">房间：</text>
						<text class="value">{{ item.roomName }}</text>
					  </view>
					  <view class="info-row">
						<text class="label">预订时间：</text>
						<text class="value">{{ item.beginTime }} 至 {{ item.endTime }}</text>
					  </view>
					  <view class="info-row">
						<text class="label">时长：</text>
						<text class="value">{{ item.bookHour }}小时</text>
					  </view>
					  <view class="info-row">
						<text class="label">支付金额：</text>
						<text class="value price">¥{{ (item.totalFee / 100).toFixed(2) }}</text>
					  </view>
					  <view class="info-row" v-if="item.couponCode">
						<text class="label">优惠券：</text>
						<text class="value">{{ item.couponCode }} (¥{{ (item.couponAmount / 100).toFixed(2) }})</text>
					  </view>
					</view>
					<view class="action-box">
						<view class="btn-row">
							<u-button type="primary" size="mini" @click="editOrder(item)">更换包厢</u-button>
							<u-button type="success" size="mini" @click="delayOrder(item)">订单延期</u-button>
						</view>
						</view>
				  </view>
				</view>
			
				<!-- 分页 -->
				<view class="pagination">
				  <u-loadmore :status="loadStatus" @loadmore="loadMore"/>
				</view>
			
		</view>
	  </view>
		
	<!-- </view> -->
</template> 

<script>
export default {
  data() {
    return {
      queryParams: {
        orderNo: '',
        transactionId: '',
        mchName: '',
        roomName: '',
        pageNum: 1,
        pageSize: 10
      },
      orderList: [],
      total: 0,
      loadStatus: 'loadmore'
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    getOrderList() {
	  //发送POST请求获取订单列表_已完成
      uni.$u.http.post('/system/order/list', this.queryParams).then(res => {
        if (res.code == 0) {
			console.log(res)
			this.total=res.total
			this.orderList=res.rows
			console.log(this.total)
			console.log(this.orderList)
          if (this.queryParams.pageNum == 1) {
            this.orderList = res.rows
          } else {
            this.orderList = [...this.orderList, ...res.rows]
          }

          console.log(this.loadStatus)
          // 更新加载状态
          if (this.orderList.length >= this.total) {
            this.loadStatus = 'nomore'
          } else {
            this.loadStatus = 'loadmore'
          }
        }
      })
    },
    
    search() {
      this.queryParams.pageNum = 1
      this.getOrderList()
    },
    
    reset() {
      this.queryParams = {
        orderNo: '',
        transactionId: '',
        mchName: '',
        roomName: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getOrderList()
    },
    
    loadMore() {
      if (this.loadStatus === 'nomore') return
      this.queryParams.pageNum++
      console.log('调用loadmore')
      this.getOrderList()
    },
    
    createOrder() {
      uni.navigateTo({
        url: '/pages/order/create/index'
      })
    },
    

  editOrder(item) {
	  uni.setStorageSync('orderInfo', item)
      uni.navigateTo({
        url: '/pages/order/edit/index?type=edit'
      })
    },
    
    delayOrder(item) {
      uni.setStorageSync('delayOrderInfo', item)
      uni.navigateTo({
        url: '/pages/order/delay/index?type=edit'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  
  background: #f5f5f5;
  min-height: 100vh;
}
.warp{
  padding: 20rpx;
}
.search-box {
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  margin-top:180rpx;
  
  .search-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    margin-bottom: 20rpx;
  }
  
  .search-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
  }
}

.action-box {
  width: 670rpx;
  margin-left: 20rpx;
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.action-box {
  .btn-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;
    
    .u-button {
      flex: 1;
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.order-list {
  .order-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eee;
      
      .store-name {
        font-size: 32rpx;
        font-weight: bold;
      }
      
      .order-status {
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        
        &.status-cancelled {
          background: #f5f5f5;
          color: #999;
        }
        
        &.status-using {
          background: #e1f3d8;
          color: #67c23a;
        }
        
        &.status-completed {
          background: #f0f9eb;
          color: #409eff;
        }
      }
    }
    
    .order-content {
      padding-top: 20rpx;
      
      .info-row {
        display: flex;
        margin-bottom: 16rpx;
        
        .label {
          color: #666;
          width: 160rpx;
        }
        
        .value {
          flex: 1;
          
          &.price {
            color: #ff6b6b;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.pagination {
  text-align: center;
  padding: 20rpx 0;
}
</style> -->